<template>
  <section>
    <van-sticky>
      <PageHeader title="设置"/>
    </van-sticky>

    <van-cell-group title="消息提醒" v-if="member">
      <van-cell title="关注公众号" label="关注后可及时接收提醒">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-button type="primary" round size="small" @click="qrcodePopupVisible=true">立即关注</van-button>
        </template>
      </van-cell>

      <van-cell title="微信提醒" label="需先关注公众号">
        <template #right-icon>
          <van-switch v-model="member.wechat_notice_enable" size="24px" :active-value="1" :inactive-value="0"
                      @change="saveMemberProfile"/>
        </template>
      </van-cell>

      <van-cell title="手机提醒">
        <template #right-icon>
          <van-switch v-model="member.sms_notice_enable" size="24px" :active-value="1" :inactive-value="0"
                      @change="saveMemberProfile"/>
        </template>
      </van-cell>

      <van-cell title="隐藏手机号">
        <template #right-icon>
          <van-switch v-model="member.hidden_mobile_enable" size="24px" :active-value="1" :inactive-value="0"
                      @change="saveMemberProfile"/>
        </template>
      </van-cell>

      <van-cell title="发送手机号需审核" label="其他人请求查看你的手机号是否需要审核">
        <template #right-icon>
          <van-switch v-model="member.phone_audit_enable" size="24px" :active-value="1" :inactive-value="0"
                      @change="saveMemberProfile"/>
        </template>
      </van-cell>

      <van-cell title="发送微信号需审核" label="其他人请求查看你的微信号是否需要审核">
        <template #right-icon>
          <van-switch v-model="member.wxid_audit_enable" size="24px" :active-value="1" :inactive-value="0"
                      @change="saveMemberProfile"/>
        </template>
      </van-cell>

      <van-cell title="征婚状态" :label="'当前状态:' + member.marriage_seeking_status_str">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-switch v-model="member.marriage_seeking_status" size="24px" :active-value="1" :inactive-value="0"
                      @change="saveMemberProfile"/>
        </template>
      </van-cell>

    </van-cell-group>

    <van-cell-group title="收款资料">
      <van-cell title="设置收款账号" is-link :to="{name: 'MySettingReceiveMoney'}"/>
    </van-cell-group>

    <van-cell-group title="其他">
      <van-cell title="推广码" is-link @click="showShareQrCodePopup"/>
      <van-cell title="注销账号" label="注销后您的个人资料将被删除">
        <!-- 使用 right-icon 插槽来自定义右侧图标 -->
        <template #right-icon>
          <van-button type="warning" round size="small" @click="del">注销</van-button>
        </template>
      </van-cell>
    </van-cell-group>

    <van-popup v-model="qrcodePopupVisible" :style="{ width: '60%' }">
      <div class="text-center mt10">
        美恋婚恋系统
      </div>

      <div class="text-center mt10">
        <img :src="STATIC_BASE_URL + 'images/mp/qrcode.jpg'" height="200" width="200"/>
      </div>

      <div class="text-center mt5 mb20 font-big">
        长按二维码关注公众号
      </div>
    </van-popup>

    <van-popup v-model="shareQrcodePopupVisible" :style="{ width: '60%' }">
      <div class="text-center mt10">
        推广码
      </div>

      <div class="text-center mt10">
        <img :src="shareQrcodeImg" height="200" width="200" v-if="shareQrcodeImg" />
      </div>

      <div class="text-center mt5 mb20 font-big">
        长按二维码保存到手机
      </div>
    </van-popup>
  </section>
</template>

<script>
  import Vue from 'vue';
  import {Toast, Sticky, CellGroup, Cell, Button, Switch, Dialog} from 'vant';
  import {
    memberSaveBaseInfoUri,
    STATIC_BASE_URL,
    memberDeleteUri,
    memberMyQrCodeImgUri
  } from "../../../common/api";
  import PageHeader from "../../componets/PageHeader";

  Vue.use(Toast).use(Sticky).use(CellGroup).use(Cell).use(Button).use(Switch).use(Dialog);

  export default {
    components: {
      PageHeader
    },
    data() {
      return {
        STATIC_BASE_URL: STATIC_BASE_URL,
        qrcodePopupVisible: false,
        member: null,
        user: null,
        shareQrcodePopupVisible: false,
        shareQrcodeImg: null
      }
    },
    methods: {
      saveMemberProfile() {
        const that = this;
        const formData = {
          gender: this.member.gender,
          sms_notice_enable: this.member.sms_notice_enable,
          wechat_notice_enable: this.member.wechat_notice_enable,
          hidden_mobile_enable: this.member.hidden_mobile_enable,
          marriage_seeking_status: this.member.marriage_seeking_status,
          phone_audit_enable: this.member.phone_audit_enable,
          wxid_audit_enable: this.member.wxid_audit_enable
        };
        that.$http.post(memberSaveBaseInfoUri, formData, {emulateJSON: true}).then(response => {
          let {msg, code, data} = response.body
          if (code != 0) {
            Toast.fail(msg)
          } else {
            that.member = data.member;
            that.GLOBAL.memberProfile = data.member;
            // Toast.success('保存成功');
          }
        }, response => {
          Toast.fail('发生错误')
        })
      },
      del() {
        const that = this;

        Dialog.confirm({
          message: '确定要注销资料吗？',
        }).then(() => {
          that.$http.post(memberDeleteUri, {}, {emulateJSON: true}).then(response => {
            let {msg, code, data} = response.body
            if (code != 0) {
              Toast.fail(msg)
            } else {
              window.localStorage.removeItem('openid');
              window.localStorage.removeItem('access_token');
              window.localStorage.removeItem('upload_token');
              window.localStorage.removeItem('user_id');
              that.GLOBAL.userInfo = null;
              that.GLOBAL.memberProfile = null;
              Toast.success('注销成功');
              that.$router.replace({path: '/'})
            }
          }, response => {
            Toast.fail('发生错误')
          })
        }).catch(() => {
          // on cancel
        });
      },
      showShareQrCodePopup() {
        this.shareQrcodePopupVisible = true;
        const that = this;
        const url = memberMyQrCodeImgUri;
        this.$http.get(url).then(response => {
          let {code, msg, data} = response.body
          if (code != 0) {
            Toast.fail(msg);
          } else {
            that.shareQrcodeImg = data.url;
          }
        }, response => {
          // error callback
        });
      }
    },
    mounted: function () {
      this.member = this.GLOBAL.memberProfile;
      this.user = this.GLOBAL.userInfo;

      this.EventBus.$on('OnUserLogined', () => {
        this.user = this.GLOBAL.userInfo;
        this.member = this.GLOBAL.memberProfile;
      });
    }
  }
</script>

<style scoped>

</style>
